<script setup>
import {ArrowBack, ArrowForward, Search} from '@vicons/ionicons5'
import Register from "./Register.vue";
import Login from "./Login.vue";
import Header from './header/Header.vue'
import {onMounted} from "vue";
import {requestGetUserInfo} from "../api/user/UserApi";
import {requestHomeListApi} from "../api/home/homeApi";

//搜索关键词
const searcherWord = ref('')

const searcherBtnClick = () => {
  window.open('https://www.baidu.com/s?ie=UTF-8&wd=' + searcherWord.value)
}

/**
 * 导航列表
 * @type {Ref<UnwrapRef<*[]>>}
 */
const homeData = ref([])

onMounted(() => {
  requestHomeListApi().then(res => {
    homeData.value = res.data
  })
})

/**
 * 是否是生产环境
 * @type {boolean}
 */
const prodFlag = import.meta.env.PROD

const clickHomeItem = (item) => {
  const token = window.localStorage.getItem('token')

  if (token) {
    if (prodFlag) {
      window.open(`${item.prodHref}?token=${token}`)
    } else {
      window.open(`${item.href}?token=${token}`)
    }
  } else {
    window.$message.error("请先登录！")
  }
}

const imgList = [
  'https://manggu-oss.jxwazx.cn/home/01.webp',
  'https://manggu-oss.jxwazx.cn/home/02.webp',
  'https://manggu-oss.jxwazx.cn/home/03.webp',
  'https://manggu-oss.jxwazx.cn/home/04.webp',
  'https://manggu-oss.jxwazx.cn/home/05.webp',
  'https://manggu-oss.jxwazx.cn/home/06.webp'
]

</script>

<template>

  <Header></Header>
  <div class="banner">
    <n-carousel show-arrow autoplay :interval="3000">
      <img
          class="carousel-img"
          v-for="(item) in imgList"
          :src="item"
      >

      <template #arrow="{ prev, next }">
        <div class="custom-arrow">
          <button type="button" class="custom-arrow--left" @click="prev">
            <n-icon>
              <ArrowBack/>
            </n-icon>
          </button>
          <button type="button" class="custom-arrow--right" @click="next">
            <n-icon>
              <ArrowForward/>
            </n-icon>
          </button>
        </div>
      </template>
      <template #dots="{ total, currentIndex, to }">
        <ul class="custom-dots">
          <li
              v-for="index of total"
              :key="index"
              :class="{ ['is-active']: currentIndex === index - 1 }"
              @click="to(index - 1)"
          />
        </ul>
      </template>
    </n-carousel>

    <div class="searcher">
      <!-- <n-input placeholder="搜索" size="large" v-model:value="searcherWord">
        <template #prefix>
          <n-icon :component="Search"/>
        </template>
      </n-input>
      <n-button size="large" class="searcher_btn" type="success" @click="searcherBtnClick">点我搜索
      </n-button> -->
      <n-input-group>
        <n-input v-model:value="searcherWord"/>
        <n-button ghost type="success" @click="searcherBtnClick">
          点我搜索
        </n-button>
      </n-input-group>
    </div>
  </div>


  <div class="items_container">
    <h1 class="text-3xl font-bold m-2">最新动态</h1>
    <hr color="#ccc" size="3" width="100%" style="margin: 16px 0">

    <n-grid cols="1 xs:1 s:2 m:3 l:3 xl:4 2xl:5" x-gap="24" y-gap="36" responsive="screen">
      <n-grid-item style="cursor: pointer" v-for="(item) in homeData" :key="item.id"
                   @click="clickHomeItem(item)">
        <div class="item">
          <img
              :src="item.imgSrc">
          <div class="bottom">
            <!--       <n-tag class="title" size="large"> 爱在西元前 </n-tag>-->
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </div>

      </n-grid-item>
    </n-grid>

  </div>

  <footer class="footer">
    <!--      <div class="attention">关注我们</div>-->
    <!--      <div class="center">-->
    <!--        <div></div>-->
    <!--      </div>-->
  </footer>
</template>

<style scoped lang="less">
.light-green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner {
  position: relative;
  top: -72px;
  left: 0;
  z-index: 0;
  height: auto;
  width: 100%;
  margin: 0 auto;
  //margin-top: 656px;
}

.items_container {
  width: 80%;
  margin: 0 auto;


  .item {
    height: 450px;
    //width: 404px;
    //margin: 20px 40px;
    text-align: center;

    & > img:first-child {
      width: 100%;
      padding: 0 20%;
      background: #1a71ff;
      height: 60%;
      display: block;
      margin: auto;
    }

    .bottom {
      padding: 24px;
      margin-top: -3px;
      text-align: left;
      background: #0052d9;
      color: white;
      height: 40%;

      .title {
        margin: 10px;
      }

      h3 {
        font-size: 24px;
        line-height: 1.4em;
        margin: 12px 0px;
        padding: 0px;
      }

      p {
        font-size: 16px;
        line-height: 1.5em;
        margin: 12px 0px;
        padding: 0px;
        font-weight: normal;
      }
    }


  }

}


//搜索框
.searcher {
  width: 80%;
  max-width: 980px;
  margin: 24px auto 24px;
  position: absolute;
  display: flex;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .searcher_btn {
    margin: 0 10px;
  }
}

.footer {
  margin: 0 auto;
  max-width: 1080px;
  width: 100%;
  height: 100px;
  //background: red;
}

.carousel-img {
  width: 100%;
  object-fit: cover;
}

.custom-arrow {
  display: flex;
  position: absolute;
  bottom: 25px;
  right: 10px;
}

.custom-arrow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-width: 0;
  border-radius: 8px;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-arrow button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.custom-arrow button:active {
  transform: scale(0.95);
  transform-origin: center;
}

.custom-dots {
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.custom-dots li {
  display: inline-block;
  width: 12px;
  height: 6px;
  margin: 0 3px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: width 0.3s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.custom-dots li.is-active {
  width: 40px;
  background: #fff;
}
</style>
